<template>
  <div id="content">
    <ul>
      <li v-for="(item,index) in fenleiList" :key="index" @click="goFenlei(item.kid)">
        <img :src="item.kimg" alt />
        <span>{{item.kname}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import getGoods from "@/api/getGoods.js";
export default {
  data() {
    return {
      fenleiList: ""
    };
  },

  components: {},
  created() {
    this.getGoodsType(1);
  },
  methods: {
    goFenlei(kid) {
      this.$router.push("/fenleiDet/" + kid);
    },
    async getGoodsType() {
      try {
        let p = await getGoods.getGoodsType(this.$route.params.id);
        if (p.data.flag) {
          this.fenleiList = p.data.data;
        }
      } catch (err) {
        console.log(err);
      }
    }
  },
  watch:{
      $route:{
          handler(val){
              this.getGoodsType()
          }
      }
  }
};
</script>

<style lang="scss" scoped>
#content {
  position: absolute;
  top: 40px;
  left: 86px;
  width: 77%;
  min-height: 100%;
  margin-bottom: 52px;
  ul {
    width: 100%;
    height: 100%;
    li {
      float: left;
      img {
        width: 70px;
        height: 70px;
        margin: 8px 13px;
      }
      span {
        font-size: 12px;
        color: #9d9d9d;
      }
    }
  }
}
</style>